<template>
  <div class="c-w100 c-pingFangSc c-pt24 c-pb24" :class="[8, 9, 10].includes(orderBy) ? 'c-ph24' : 'c-pl24'" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)">
    <template v-if="orderBy == 1">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-mr20" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="couponStyle c-bg-white c-p c-br12 c-text-hidden c-box-shadowEdu" v-if="prodItem.type == 1">
            <div class="exchange-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
              <div class="c-fs34 c-fc-white">兑换券</div>
              <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(prodItem)">领取</div>
            </div>
            <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">适用于指定商品</div>
          </div>
          <div class="couponStyle c-bg-white c-p c-br12 c-text-hidden c-box-shadowEdu" v-else-if="prodItem.type == 4">
            <div class="exchange-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
              <div class="c-fs34 c-fc-white">抵价券</div>
              <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(prodItem)">领取</div>
            </div>
            <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">适用于师资预约</div>
          </div>
          <div class="couponStyle c-bg-white c-p c-br12 c-text-hidden c-box-shadowEdu" v-else-if="prodItem.type == 5">
            <div class="coupon-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
              <div class="c-fc-white c-flex-column c-justify-sb">
                <div class="c-fs22 c-fw-b"><span class="c-fs42">{{Number(prodItem.price)}}</span>折</div>
                <div class="c-fs18">{{Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '折扣券'}}</div>
              </div>
              <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(prodItem)">领取</div>
            </div>
            <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">{{getUseName(prodItem)}}</div>
          </div>
          <div class="couponStyle c-bg-white c-p c-br12 c-text-hidden c-box-shadowEdu" v-else>
            <div class="c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center" :class="prodItem.prodType != cfrom.shareholderPayVoucher ? 'coupon-bg' : prodItem.type == 2 ? 'voucherFree-bg' : 'voucherCharge-bg'">
              <div class="c-fc-white c-flex-column c-justify-sb c-w0 c-flex-grow1">
                <div class="c-fw-b c-text-ellipsis1" v-couponprice3="prodItem.price"><span class="c-fs22">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
                <div class="c-fs18">{{prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无门槛券'}}</div>
              </div>
              <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20 c-flex-shrink0" @click="getCoupon(prodItem)">{{prodItem.type ==6 ? '购买' : '领取'}}</div>
            </div>
            <div class="c-fs20 c-fc-sblack c-hh50 c-lh50 c-ph20 c-text-ellipsis1">{{getUseName(prodItem)}}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 2">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-vcAlign-middle c-mr20" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="couponStyle1 c-p c-pt20" v-if="prodItem.type == 1 || prodItem.type == 4" @click="getCoupon(prodItem)">
            <div class="c-fs28 c-fw-b c-fc-sblown c-textAlign-c">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs18 c-fc-xlred c-ph20 c-pa c-w100 c-p-t64 c-p-l0 c-p-r0 c-mlr-auto c-textAlign-c c-text-ellipsis1">{{prodItem.type == 1 ? '剩余' + prodItem.leftNum + '个' : '师资预约'}}</div>
            <div class="c-fs20 c-fc-white c-ph4 c-w100 c-p-b14 c-textAlign-c c-text-ellipsis1 c-pa">{{prodItem.name}}</div>
          </div>
          <div class="couponStyle1 c-p c-pt12" v-else @click="getCoupon(prodItem)">
            <div v-if="prodItem.type == 5" class="c-fs18 c-fw-b c-fc-sblown c-textAlign-c c-Din"><span class="c-fs40">{{Number(prodItem.price)}}</span>折</div>
            <div v-else class="c-fs40 c-fw-b c-fc-sblown c-textAlign-c c-Din c-text-hidden c-ph8 c-text-ellipsis1"><span class="c-fs18">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
            <div class="c-fs18 c-fc-xlred c-ph20 c-pa c-w100 c-p-t64 c-p-l0 c-p-r0 c-mlr-auto c-textAlign-c c-text-ellipsis1">{{prodItem.type == 5 ? '折扣券' : prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : (prodItem.type == 2 && Number(prodItem.amount) == 0 ? '无门槛券' : '剩余' + prodItem.leftNum + '个')}}</div>
            <div class="c-fs20 c-fc-white c-ph10 c-w100 c-p-b14 c-textAlign-c c-pa c-text-ellipsis1">{{prodItem.type == 5 && Number(prodItem.amount) == 0 ? '无门槛使用' : (Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : prodItem.name)}}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 3">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-vcAlign-middle c-mr20" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="couponStyle2 c-p c-flex-row c-w100 c-aligni-center" v-if="prodItem.type == 1 || prodItem.type == 4" @click="getCoupon(prodItem)">
            <div class="c-flex-row c-aligni-center c-pl16 c-w100">
              <div class="c-fs28 c-fw-b c-fc-sblown c-ww104 c-textAlign-c">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
              <div class="c-ml20 c-flex-grow1 c-flex-column c-w0 c-pr5">
                <div class="c-fs24 c-fc-spink c-w100 c-text-ellipsis1 c-fw-b">{{prodItem.type == 1 ? prodItem.name : '适用于师资预约'}}</div>
                <div class="c-fs18 c-fc-spink c-w100 c-mt12">{{changeTimeToDay(prodItem)}}</div>
              </div>
            </div>
          </div>
          <div class="couponStyle2 c-p c-flex-row c-w100 c-aligni-center" v-else-if="prodItem.type == 5" @click="getCoupon(prodItem)">
            <div class="c-flex-row c-aligni-center c-pl16 c-w100">
              <div class="c-fs18 c-fw-b c-fc-sblown c-ww104 c-textAlign-c c-Din"><span class="c-fs44">{{Number(prodItem.price)}}</span>折</div>
              <div class="c-ml20 c-flex-grow1 c-flex-column c-w0 c-pr5">
                <div class="c-fs24 c-fc-spink c-w100 c-text-ellipsis1 c-fw-b">{{prodItem.name}}</div>
                <div class="c-fs18 c-fc-spink c-w100 c-mt12">{{Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '折扣券'}}</div>
              </div>
            </div>
          </div>
          <div class="couponStyle2 c-p c-flex-row c-w100 c-aligni-center" v-else @click="getCoupon(prodItem)">
            <div class="c-flex-row c-aligni-center c-pl16 c-w100">
              <div class="c-fs44 c-fw-b c-fc-sblown c-ww104 c-textAlign-c c-Din c-text-hidden"><span class="c-fs18">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
              <div class="c-ml20 c-flex-grow1 c-flex-column c-w0 c-pr5">
                <div class="c-fs24 c-fc-spink c-w100 c-text-ellipsis1 c-fw-b" v-if="prodItem.type == 2 || prodItem.type == 3 || prodItem.type == 6">{{prodItem.name}}</div>
                <div class="c-fs18 c-fc-spink c-w100 c-mt12">{{prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无门槛券'}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 4">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-vcAlign-middle c-mr20" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="couponStyle3 c-p c-flex-row c-w100 c-aligni-center" v-if="prodItem.type == 1 || prodItem.type == 4">
            <div class="c-flex-row c-aligni-center c-w100">
              <div class="c-fc-white c-ww136">
                <div class="c-fs30 c-fw-b c-w100 c-textAlign-c">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
              </div>
              <div class="c-ml16 c-flex-grow1 c-w0 c-pr10">
                <div class="c-fs24 c-fc-xblack c-w100 c-text-ellipsis1">{{prodItem.type == 1 ? prodItem.name : '适用于师资预约'}}</div>
                <div class="c-flex-row c-w100 c-aligni-center c-justify-sb c-mt12">
                  <div class="c-fc-sblack c-fs18 c-w100">{{changeTimeToDay(prodItem)}}</div>
                  <span class="c-fs18 c-fc-xlred c-bd1-xlred c-pv2 c-h c-ph12 c-br20" @click="getCoupon(prodItem)">立即领取</span>
                </div>
              </div>
            </div>
          </div>
          <div class="couponStyle3 c-p c-flex-row c-w100 c-aligni-center" v-else-if="prodItem.type == 5">
            <div class="c-flex-row c-aligni-center c-w100">
              <div class="c-fc-white c-ww136">
                <div class="c-fs18 c-fw-b c-w100 c-textAlign-c c-Din"><span class="c-fs40">{{Number(prodItem.price)}}</span>折</div>
              </div>
              <div class="c-ml16 c-flex-grow1 c-w0 c-pr10">
                <div class="c-fs24 c-fc-xblack c-w100 c-text-ellipsis1">{{prodItem.name}}</div>
                <div class="c-flex-row c-w100 c-aligni-center c-justify-sb c-mt12">
                  <div class="c-fc-sblack c-fs18 c-w100">{{Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '折扣券'}}</div>
                  <span class="c-fs18 c-fc-xlred c-bd1-xlred c-pv2 c-h c-ph12 c-br20" @click="getCoupon(prodItem)">立即领取</span>
                </div>
              </div>
            </div>
          </div>
          <div class="couponStyle3 c-p c-flex-row c-w100 c-aligni-center" v-else>
            <div class="c-flex-row c-aligni-center c-w100">
              <div class="c-fc-white c-ww136">
                <div class="c-fs40 c-fw-b c-w100 c-textAlign-c c-Din c-text-ellipsis1"><span class="c-fs18">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
              </div>
              <div class="c-ml16 c-flex-grow1 c-w0 c-pr10">
                <div class="c-fs24 c-fc-xblack c-w100 c-text-ellipsis1" v-if="prodItem.type == 2 || prodItem.type == 3 || prodItem.type == 6">{{prodItem.name}}</div>
                <div class="c-flex-row c-w100 c-aligni-center c-justify-sb c-mt12">
                  <div class="c-fc-sblack c-fs18 c-w100">{{prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无门槛券'}}</div>
                  <span class="c-fs18 c-fc-xlred c-bd1-xlred c-pv2 c-h c-ph12 c-br20" @click="getCoupon(prodItem)">{{prodItem.type == 6 ? '立即购买' : '立即领取'}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 5">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-vcAlign-middle c-mr20" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="couponStyle4 c-p c-pt44 couponBg1" v-if="prodItem.type == 1 || prodItem.type == 4" @click="getCoupon(prodItem)">
            <div class="c-fs28 c-fw-b c-fc-sblown c-textAlign-c">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs18 c-fc-white c-ph24 c-pa c-w100 c-p-t0 c-p-l0 c-p-r0 c-mlr-auto c-textAlign-c c-text-ellipsis1">{{prodItem.type == 1 ? '剩余' + prodItem.leftNum + '个' : '师资预约'}}</div>
            <div class="c-fs20 c-fc-sblown c-ph4 c-w100 c-p-b8 c-textAlign-c c-text-ellipsis1 c-pa">立即领取</div>
          </div>
          <div class="couponStyle4 c-p c-pt40 couponBg2" v-else-if="prodItem.type == 5" @click="getCoupon(prodItem)">
            <div class="c-fs36 c-fw-b c-fc-xxlred c-textAlign-c c-Din">{{Number(prodItem.price)}}<span class="c-fs18 c-fw-n">折</span></div>
            <div class="c-fs18 c-fc-white c-ph24 c-pa c-w100 c-p-t0 c-p-l0 c-p-r0 c-mlr-auto c-textAlign-c">折扣券</div>
            <div class="c-fs20 c-fc-xxlred c-ph10 c-w100 c-p-b8 c-textAlign-c c-pa">{{Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '立即领取'}}</div>
          </div>
          <div class="couponStyle4 c-p c-pt40 couponBg2" v-else @click="getCoupon(prodItem)">
            <div class="c-fs36 c-fw-b c-fc-xxlred c-textAlign-c c-Din c-text-ellipsis1"><span class="c-fs18 c-fw-n">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
            <div class="c-fs18 c-fc-white c-ph24 c-pa c-w100 c-p-t0 c-p-l0 c-p-r0 c-mlr-auto c-textAlign-c">{{prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 2 ? '无门槛券' : (prodItem.type == 3 ? '满减券' : '剩余' + prodItem.leftNum + '个')}}</div>
            <div class="c-fs20 c-fc-xxlred c-ph10 c-w100 c-p-b8 c-textAlign-c c-pa c-text-ellipsis1">{{Number(prodItem.amount) > 0 && prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : prodItem.type == 6 ? '立即购买' : '立即领取'}}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 6">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-vcAlign-middle c-mr20 c-p" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="couponStyle5 c-p c-textAlign-c" @click="getCoupon(prodItem)">
            <div class="fc-BD6127 c-fs20 c-pv8">{{getUseName(prodItem)}}</div>
            <div class="c-fs36 c-lh50 c-hh50 c-pb4 c-mt22 c-fw-b fc-FC4820 c-textAlign-c c-Din" v-if="prodItem.type == 1 || prodItem.type == 4">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs48 c-hh50 c-lh50 c-mt8 c-fw-b fc-FC4820 c-textAlign-c c-Din" v-else-if="prodItem.type == 5">{{Number(prodItem.price)}}<span class="c-fs18 c-fw-n">折</span></div>
            <div class="c-hh50 c-lh50 c-mt8 c-fw-b fc-FC4820 c-textAlign-c c-Din" v-couponprice2="prodItem.price" v-else><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
            <div class="c-fs20 fc-FC4820 c-ph24 c-w100 c-lh22 c-mlr-auto c-mt6" v-if="![1, 4].includes(prodItem.type)">{{prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 5 ? '折扣券' : '满'+Number(prodItem.amount)+'元可用'}}</div>
            <div class="c-fs20 c-fc-xxlred c-textAlign-c couponStyle5_btn c-mlr-auto c-fw-b c-ww120 c-pa  c-p-l0 c-p-r0 c-p-b10">{{prodItem.type ==6 ? '立即购买' : '立即领取'}}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 7">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
        <div class="c-inlineblack c-vcAlign-middle c-mr20" :style="getInnerSpacing(marginSettings, 2)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
          <div class="c-p c-textAlign-c" :class="prodItem.type == 1 || prodItem.type == 4 ? 'couponStyle6-1 fc-8D5D22' : 'couponStyle6 fc-B33314'" @click="getCoupon(prodItem)">
            <div class="c-fs20 c-pv4 c-ph20 c-w100 c-mlr-auto c-textAlign-c c-text-ellipsis1" v-if="prodItem.type == 1 || prodItem.type == 4">{{prodItem.type == 1 ? '剩余' + prodItem.leftNum + '个' : '师资预约'}}</div>
            <div class="c-fs20 c-pv4 c-ph20 c-w100 c-mlr-auto c-textAlign-c c-text-ellipsis1" v-else>{{prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 5 ? '折扣券' : '满'+Number(prodItem.amount)+'元可用'}}</div>
            <div class="c-fs34 c-lh44 c-hh44 c-mt20 c-fw-b c-textAlign-c c-Din" v-if="prodItem.type == 1 || prodItem.type == 4">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs40 c-lh44 c-hh44 c-mt20 c-fw-b c-textAlign-c c-Din" v-else-if="prodItem.type == 5">{{Number(prodItem.price)}}<span class="c-fs18 c-fw-b">折</span></div>
            <div class="c-lh44 c-hh44 c-mt20 c-fw-b c-textAlign-c c-Din" v-couponprice1="prodItem.price" v-else><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
            <div class="c-fs20 c-fc-xxlred c-textAlign-c mt26 c-mlr-auto c-ph20" :class="prodItem.type == 1 || prodItem.type == 4 ? 'couponStyle6_1_btn' : 'couponStyle6_btn'">{{prodItem.type ==6 ? '立即购买' : '立即领取'}}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 8">
      <div :class="prodIndex != items.length - 1 ? 'c-mb24' : ''" :style="getInnerSpacing(marginSettings, 1, prodIndex != items.length - 1)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
        <div class="couponStyle7 c-p c-flex-row c-justify-sb" @click="getCoupon(prodItem)">
          <div class="c-flex-row c-flex-center w35">
            <div class="c-fs38 c-lh50 c-hh50 c-fw-b c-fc-xmlred c-textAlign-c c-Din" v-if="prodItem.type == 1 || prodItem.type == 4">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs48 c-lh50 c-hh50 c-fw-b c-fc-xmlred c-textAlign-c c-Din" v-else-if="prodItem.type == 5">{{Number(prodItem.price)}}<span class="c-fs18 c-fw-b">折</span></div>
            <div class="c-lh50 c-hh50 c-fw-b c-fc-xmlred c-textAlign-c c-Din" v-couponprice1="prodItem.price" v-else><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv32">
            <div class="c-w0 c-flex-grow1 c-pl24 c-pr12">
              <div class="c-fc-xblack c-fs26 c-fw-b c-text-ellipsis1">{{getUseName(prodItem)}}</div>
              <div class="c-fs20 c-fc-sblack c-lh22 c-mlr-auto c-mt10">{{prodItem.type == 1 || prodItem.type == 4 ? changeTimeToDay(prodItem) : prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 5 ? '折扣券' : prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无门槛券'}}</div>
            </div>
            <div class="c-w40 c-flex-row c-flex-center">
              <div class="c-fs24 c-fc-xxlred c-textAlign-c couponStyle7_btn c-fw-b c-ph20">{{prodItem.type ==6 ? '立即买' : '立即领'}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 9">
      <div :class="prodIndex != items.length - 1 ? 'c-mb24' : ''" :style="getInnerSpacing(marginSettings, 1, prodIndex != items.length - 1)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
        <div class="couponStyle8 c-p c-flex-row c-justify-sb" @click="getCoupon(prodItem)">
          <div class="c-flex-row c-flex-center w35 c-fc-white">
            <div class="c-fs38 c-lh50 c-hh50 c-fw-b c-textAlign-c c-Din" v-if="prodItem.type == 1 || prodItem.type == 4">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs48 c-lh50 c-hh50 c-fw-b c-textAlign-c c-Din" v-else-if="prodItem.type == 5">{{Number(prodItem.price)}}<span class="c-fs18 c-fw-b">折</span></div>
            <div class="c-lh50 c-hh50 c-fw-b c-textAlign-c c-Din" v-couponprice2="prodItem.price" v-else><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv32">
            <div class="c-w0 c-flex-grow1 c-pl24 c-pr12">
              <div class="fc-BD6127 c-fs26 c-fw-b c-text-ellipsis1">{{getUseName(prodItem)}}</div>
              <div class="c-fs20 fc-BD6127 c-lh22 c-mlr-auto c-mt10">{{prodItem.type == 1 || prodItem.type == 4 ? changeTimeToDay(prodItem) : prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 5 ? '折扣券' : prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无门槛券'}}</div>
            </div>
            <div class="c-w40 c-flex-row c-flex-center">
              <div class="c-fs24 c-fc-white c-textAlign-c couponStyle8_btn c-fw-b c-ph20">{{prodItem.type ==6 ? '立即买' : '立即领'}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="orderBy == 10">
      <div :class="prodIndex != items.length - 1 ? 'c-mb24' : ''" :style="getInnerSpacing(marginSettings, 1, prodIndex != items.length - 1)" v-for="(prodItem,prodIndex) in items" :key="prodIndex">
        <div class="couponStyle9 c-p c-flex-row c-justify-sb" @click="getCoupon(prodItem)">
          <div class="c-flex-row c-flex-center w35">
            <div class="c-fs38 c-lh50 c-hh50 c-fw-b c-fc-xmlred c-textAlign-c c-Din" v-if="prodItem.type == 1 || prodItem.type == 4">{{prodItem.type == 1 ? '兑换券' : '抵价券'}}</div>
            <div class="c-fs48 c-lh50 c-hh50 c-fw-b c-fc-xmlred c-textAlign-c c-Din" v-else-if="prodItem.type == 5">{{Number(prodItem.price)}}<span class="c-fs18 c-fw-b">折</span></div>
            <div class="c-lh50 c-hh50 c-fw-b c-fc-xmlred c-textAlign-c c-Din" v-couponprice2="prodItem.price" v-else><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{Number(prodItem.price)}}</div>
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv32">
            <div class="c-w0 c-flex-grow1 c-pl24 c-pr12">
              <div class="c-fc-xmlred c-fs26 c-fw-b c-text-ellipsis1">{{getUseName(prodItem)}}</div>
              <div class="c-fs20 c-fc-xmlred c-lh22 c-mlr-auto c-mt10">{{prodItem.type == 1 || prodItem.type == 4 ? changeTimeToDay(prodItem) : prodItem.prodType == cfrom.shareholderPayVoucher ? '代金券' : prodItem.type == 5 ? '折扣券' : prodItem.type == 3 ? '满'+Number(prodItem.amount)+'元可用' : Number(prodItem.amount) > 0 ? '满'+Number(prodItem.amount)+'元可用' : '无门槛券'}}</div>
            </div>
            <div class="c-w40 c-flex-row c-flex-center">
              <div class="c-fs24 c-fc-white c-textAlign-c couponStyle9_btn c-fw-b c-ph20">{{prodItem.type ==6 ? '立即买' : '立即领'}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { customStyle } from '@/utils/customStyle.js'
export default {
  components: {},
  mixins: [customStyle],
  props: {
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    items: {
      type: Object,
      default: null,
    },
    orderBy: {
      type: Number,
      default: 1,
    },
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      cfrom: global.ckFrom
    };
  },
  computed: {
    getUseName() {
      return function (prodItem) {
        return prodItem.type == 1 || prodItem.type == 4 ?
        (prodItem.type == 1 ? '适用于指定商品' : '适用于师资预约') :
        (prodItem.redeemType == 26 ? '全店商品可用' : '适用于指定商品')
        // (prodItem.redeemType == 26 ? '适用于知识商品' : (prodItem.redeemType == 25 ? '适用于商城商品' : prodItem.redeemType == 27 ? '适用于指定类型' : '适用于指定商品'))
      }
    }
  },
  directives: {
    couponprice1: {
      bind(element, binding) {
        //指令与元素成功绑定时（一上来）
        let price = '' + binding.value;
        if (price.length >= 8) {
          element.classList.add('c-fs30');
        } else if (price.length >= 6) {
          element.classList.add('c-fs34');
        } else {
          element.classList.add('c-fs40');
        }
      }
    },
    couponprice2: {
      bind(element, binding) {
        //指令与元素成功绑定时（一上来）
        let price = '' + binding.value;
        if (price.length >= 8) {
          element.classList.add('c-fs36');
        } else if (price.length >= 6) {
          element.classList.add('c-fs40');
        } else {
          element.classList.add('c-fs48');
        }
      }
    },
    couponprice3: {
      bind(element, binding) {
        //指令与元素成功绑定时（一上来）
        let price = '' + binding.value;
        if (price.length >= 8) {
          element.classList.add('c-fs24');
        } else if (price.length >= 6) {
          element.classList.add('c-fs28');
        } else {
          element.classList.add('c-fs36');
        }
      }
    },
  },
  methods: {
    // 修改时间格式
    changeTimeToDay(item) {
      if (item.validStatus == 1) {
        return '领券起' + item.validPeriod + '天内可用';
      } else if (item.validStatus == 2) {
        return '领券次日起' + item.validPeriod + '天内可用';
      } else {
        return `${item.startAt.substr(0, 10).replace(/-/g, ".")}-${item.endAt.substr(0, 10).replace(/-/g, ".")}`;
      }
    },
    //领取优惠券
    getCoupon(prodItem) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      if (
        localStorage.getItem("enableBindPhoneInRedeemCode") == 1 &&
        !localStorage.getItem("uMobile")
      ) {
        utilJs.goBindMobile();
      } else {
        if (prodItem.prodType && prodItem.prodType == this.cfrom.shareholderPayVoucher) {
          this.$routerGo(this, "push", { path: "/homePage/shareholder/shCouponDetail", query: { id: prodItem.redeemCodeId, rcdId: '', fromModule: prodItem.fromModule, source: 21 } });
        } else {
          //source == 2首页专区领取
          utilJs.postMethod(`${global.apiurl}redeemCodes/collectRedeemCodeId/${prodItem.encRedeemCodeId}`, {source: 2}, res => {
            if (res.status == 8 || res.status == 15) {
              this.$showCjToast({
                text: '领取成功',
                type: 'success'
              });
              return;
            } else if (res.status == 13) {
              utilJs.goBindMobile();
            } else {
              this.$showCjToast({
                text: res.detail,
                type: 'warn'
              });
            }
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.fc-coupon {
  color: #ee6d3f;
}
.couponStyle1 {
  background: url("../../../public/i/wap/coupon/couponBg1.png") no-repeat;
  width: 3.3rem;
  height: 3.6rem;
  background-size: 100% 100%;
}
.couponStyle2 {
  background: url("../../../public/i/wap/coupon/couponBg2.png") no-repeat;
  width: 9.5rem;
  height: 3.2rem;
  background-size: 100% 100%;
}
.couponStyle3 {
  background: url("../../../public/i/wap/coupon/couponBg3.png") no-repeat;
  width: 11.5rem;
  height: 3.2rem;
  background-size: 100% 100%;
}
.couponStyle4 {
  width: 3.2rem;
  height: 3.8rem;
}
.couponBg1 {
  background: url("../../../public/i/wap/coupon/couponBg4.png") no-repeat;
  background-size: 100% 100%;
}
.couponBg2 {
  background: url("../../../public/i/wap/coupon/couponBg5.png") no-repeat;
  background-size: 100% 100%;
}
.voucherCharge-bg{
  background: url("../../../public/i/wap/coupon/voucherCharge.png") no-repeat;
  background-size: cover;
  height: 2.55rem;
}
.voucherFree-bg {
  background: url("../../../public/i/wap/coupon/voucherFree.png") no-repeat;
  background-size: cover;
  height: 2.55rem;
}
.c-p-b14 {
  bottom: 0.35rem;
}
.c-ww136 {
  width: 3.4rem;
}
.fc-coupon {
  color: #ee6d3f;
}
.couponStyle {
  width: 6.75rem;
}
.coupon-bg {
  background: url("../../../public/i/wap/coupon/coupon_top.png") no-repeat;
  background-size: 100%;
  height: 2.55rem;
}
.exchange-bg {
  background: url("../../../public/i/wap/coupon/exchange_top.png") no-repeat;
  background-size: 100%;
  height: 2.55rem;
}
.c-pingFangSc {
  font-family: 'PingFangSC';
}
.c-Din {
  font-family: 'DIN Alternate';
}
.couponStyle5 {
  width: 5.5rem;
  height: 4.8rem;
  background: url("../../../public/i/wap/coupon/couponIndex6.png") no-repeat;
  background-size: 100% 100%;
}
.couponStyle5_btn {
  height: 0.9rem;
  background-image: linear-gradient(180deg, #FFFBF5 0%, #FFA65A 100%);
  border-radius: 0.55rem;
  line-height: 0.9rem;
  display: inline-block;
}
.fc-BD6127 {
  color: #BD6127;
}
.fc-FC4820 {
  color: #FC4820;
}
.mt-4 {
  margin-top: -0.1rem;
}
.couponStyle6 {
  width: 4.3rem;
  height: 4.4rem;
  background: url("../../../public/i/wap/coupon/couponIndex7.png") no-repeat;
  background-size: 100% 100%;
}
.couponStyle6-1 {
  width: 4.3rem;
  height: 4.4rem;
  background: url("../../../public/i/wap/coupon/couponIndex7-1.png") no-repeat;
  background-size: 100% 100%;
}
.couponStyle6_btn {
  height: 0.9rem;
  background-image: linear-gradient(180deg, #FFD6D6 0%, #FFAEAE 100%);
  border-radius: 0.55rem;
  line-height: 0.9rem;
  color: #B33314;
  display: inline-block;
}
.couponStyle6_1_btn {
  height: 0.9rem;
  background-image: linear-gradient(180deg, #F2DE7A 0%, #FFD731 100%);
  border-radius: 0.55rem;
  line-height: 0.9rem;
  color: #8D5D22;
  display: inline-block;
}
.fc-B33314 {
  color: #B33314;
}
.fc-8D5D22 {
  color: #8D5D22;
}
.couponStyle7 {
  height: 3.4rem;
  background: url("../../../public/i/wap/coupon/couponIndex8.png") no-repeat;
  background-size: 100% 100%;
}
.couponStyle7_btn {
  width: 3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFDAC9 100%);
  border-radius: 0.65rem;
}
.couponStyle8 {
  height: 3.4rem;
  background: url("../../../public/i/wap/coupon/couponIndex9.png") no-repeat;
  background-size: 100% 100%;
}
.couponStyle8_btn {
  width: 3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  background-image: linear-gradient(270deg, #FFBA5E 0%, #FF3D72 100%);
  border-radius: 0.65rem;
}
.fc-BD6127 {
  color: #BD6127;
}
.couponStyle9 {
  height: 3.4rem;
  background: url("../../../public/i/wap/coupon/couponIndex10.png") no-repeat;
  background-size: 100% 100%;
}
.couponStyle9_btn {
  width: 3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  background-image: linear-gradient(270deg, #FF3D3D 0%, #FF8C5E 100%);
  border-radius: 0.65rem;
}
.w35 {
  width: 35%;
}
.mt26 {
  margin-top: 0.65rem;
}
</style>
